<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <script>
        function debounce(fn, delay) {//防抖
        // 维护一个 timer，用来记录当前执行函数状态
        let timer = null;
        return function() {
            // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
            let context = this;
            let args = arguments;
            // 清理掉正在执行的函数，并重新执行
            clearTimeout(timer);
            timer = setTimeout(function() {
            fn.apply(context, args);
            }, delay);
        }
        }
        let flag = 0; // 记录当前函数调用次数
        // 当用户滚动时被调用的函数
        function foo() {
        flag++;
        console.log('Number of calls: %d', flag);
        }
        
        // 在 debounce 中包装我们的函数，过 2 秒触发一次
        document.body.addEventListener('scroll', debounce(foo, 2000));
        
        function throttle(func, delay){//节流
        let timer = null;
        
        return function(){
            let context = this;
            let args    = arguments;
            if(!timer){
            timer = setTimeout(function(){
                func.apply(context, args);
                timer = null;
            }, delay);
            }
        }
        }
    </script>
</body>
</html>